<template>
	<view class="d-flex mvideo flex-column" :style="{width:windowWidth+'px',height:videoPageHeight-(showtype==2?xBarHeight:0)+'px'}">
		<swiper class="d-flex m-wx-video-swiper" circular @change="swiperChange" :current="swiperCurrent" :vertical="true"
			:duration="swiper_duration"   :style="{width:windowWidth+'px',height:videoPageHeight-(showtype==2?xBarHeight:0)-50+'px'}">
			<swiper-item v-for="(item, index) in displaySwiperList" :key="index">
				
				<!-- <view style="position: absolute;top: 10vh;left: 200px;z-index: 9999;color: red;">
					<view class="" style="width: 50px;height: 50px;background: red;" @tap.stop="diytest">
						sdffsdfs
					</view>
				
				</view> -->
				<view class="d-flex swiper-item position-relative" :style="{width:windowWidth+'px',height:videoPageHeight-(showtype==2?xBarHeight:0)-50+'px'}">
					<!-- <view class="position-fixed bg-white d-flex flex-column" style="top: 100px;left: 60px;width: 200px;height: 200px;z-index: 9;">
						<text class="d-flex">16/9宽度：{{(videoPageHeight-(showtype==2?xBarHeight:0)-50)*0.5625}}</text>
						<text class="d-flex">差：{{screenWidth-(videoPageHeight-(showtype==2?xBarHeight:0)-50)*0.5625}}</text>
					</view> -->
					<!-- 视频 -->
					<video :id="`video__${index}`" :controls="controls" :show-fullscreen-btn="showFullscreenBtn" :autoplay="false" :loop="loop"
						:data-index="index" play-strategy=2 :show-center-play-btn="false" @timeupdate="timeUpdate($event)" @controlstoggle="controlstoggle" 
						@play="playhandler"   @error="diyerror" @tap="clickVideo" :object-fit="objectFit" @waiting="waitingFn"
						@loadedmetadata="loadedmetadata($event)" @ended="onended" :style="{width:windowWidth+'px',height:videoPageHeight-(showtype==2?xBarHeight:0)-50+'px',top:screenWidth-(videoPageHeight-(showtype==2?xBarHeight:0)-50)*0.5625<0?screenWidth-(videoPageHeight-(showtype==2?xBarHeight:0)-50)*0.5625+'px':'0px'}"
						class="m-wx-video-player" :src="item.wx_original_url"></video>
					<image :src="item.cover" class="position-absolute left-0 m-wx-video-poster"
						mode="scaleToFill"
						:style="{zIndex:isStop2 || index != displayIndex ||  (item.pay_staus!=1 && !user_isVip) ? 3:-1 , top:screenWidth-(videoPageHeight-(showtype==2?xBarHeight:0)-50)*0.5625<0?screenWidth-(videoPageHeight-(showtype==2?xBarHeight:0)-50)*0.5625+'px':'0px'}">
					</image>
					<!-- 调试用 -->
				<!-- 	<view style="position: absolute;top: 30vh;left: 200px;z-index: 9999;color: red;background: blue;">
						{{'index:'+index}}
						{{'displayIndex:'+displayIndex}}
						
					</view> -->
					<view class="position-absolute top-0 left-0 d-flex a-center j-center" :style="{zIndex:(waiting || isStop2) && (item.pay_staus ==1 || user_isVip) && index == displayIndex ?4:-1 , width:windowWidth+'px',height:videoPageHeight-(showtype==2?xBarHeight:0)-50+'px'}">
						<view class="d-flex bg-white3 a-center j-center p-5 rounded30">
							<u-loading-icon mode="circle" size="50" color="#ffbb65" inactiveColor="#ffffff"></u-loading-icon>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		
		<!-- 进度条滑动时间 -->
		<view v-if="isDrag" class="position-fixed top-0 dragTime d-flex a-center j-center" :style="{width:screenWidth+'px',height:videoPageHeight-50+'px'}">
			<view class="d-flex flex-row bg-black py-3 px-5 rounded20">
				<text class="d-flex text-white mr-2 font-weight font-big">{{dragStarTime}}</text>
				<text class="d-flex text-lightbg font-big">/</text>
				<text class="d-flex text-lightbg ml-2 font-big">{{dragEndTime}}</text>
			</view>
		</view>
		
		<!-- 底部选集、进度条 -->
		<view class="video_bottom videoBottomBg" :style="{height: (50+(showtype==2?xBarHeight:0)-(screenWidth-(videoPageHeight-(showtype==2?xBarHeight:0)-50)*0.5625<0?(screenWidth-(videoPageHeight-(showtype==2?xBarHeight:0)-50)*0.5625):0))+'px'}">
			<view class="d-flex j-center video-time" v-if="isShowTimeStatus" :animation="cur_ani">
			<!-- <view class="d-flex j-center video-time" :animation="cur_ani"> -->
				<view class="d-flex a-center j-end video-time-current" style="width: 85px;height: 50px;">
					<text class="d-flex">{{ dragStarTime }}</text>
				</view>
				<!-- 进度栏 -->
				<view class="d-flex flex-column j-center slider-view" style="height: 50px;">
					<u-slider class="m-0" v-model="currentTime" :min="0" :max="video_duration" :blockSize="20" inactiveColor="rgba(255, 255, 255, 0.2)" 
					activeColor="#f47920"
					blockColor="#f47920"
					@changing="sliderChanging" @change="sliderChange"></u-slider>
				</view>
				<view class="d-flex a-center j-start video-time-current" style="width: 85px;height: 50px;">
					<text class="d-flex">{{ dragEndTime }}</text>
				</view>
			</view>
			<!-- 当前集数 -->
			<view class="d-flex j-center video-info-current" v-if="isShowRightStatus" @tap.stop="touchSwitch">
				<view class="d-flex flex-1 a-center" style="height: 50px;">
					<!-- 旋转光盘 -->
					<view class="d-flex video-disk">
						<view class="music-cover" :style="muted?'':'animation: rotate 5s linear infinite;'">
							<image class="music-disk" src="@/static/images/icon_disk.png"></image>
						</view>
					</view>
					<!-- 名称 -->
					<view class="d-flex" style="margin-left: 20upx;font-size: 32rpx;">
						{{originList[originIndex].name||''}}
					</view>
					<!-- <view class="d-flex flex-shrink" style="margin-left: 10upx;font-size: 32rpx;">
						{{originList[originIndex].playlet_number_name||''}}
					</view> -->
					<!-- 弹簧 -->
					<view style="flex: 1;"></view>
					<!-- 选集 -->
					<view class="d-flex video-info-btn a-center flex-shrink">
						<text class="arrow-right-title">{{showtype==2?'选集':'看全集'}}</text>
						<image style="width: 16px;height: 16px;" src="@/static/video/video-right.png"></image>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 播放暂停 -->
		<image v-if="isShowTimeStatus&&!waiting&&!isDrag" :data-index="index" @tap.stop="clickPlay" class="playState"
			:src="curStatusRes" :animation="cur_ani"></image>
		<!-- 需要购买-暂停播放 -->
		<image v-if="showBuy" :data-index="index" @tap.stop="clickPay(originIndex)" class="playState"
			:src="pause_res"></image>
			
		<!-- 右侧工具 -->
		<view class="video-tools" v-if="isShowRightStatus" :style="{bottom:menuInfo.length>=4?'10vh':'28vh'}">
			<view class="control-wrap">
				<block v-if="is_change" v-for="(tab,tabid) in menuInfo" :key="tabid">
					<button class="item" @click="clickRightIcon(tab)">
						<image class="icon icon-like" :src="'/static/video/'+tab.icon"></image>
						<view class="txt">
							{{getCurNum(tab,originIndex) }}
						</view>
					</button>
				</block>
			</view>
		</view>
		
		<!-- 提示 -->
		<u-popup :show="tipsPopup" mode="center" bgColor="transparent" overlayOpacity="0.8"
			:closeOnClickOverlay="false" round="10">
			<view class="d-flex flex-column rounded20 overhide a-center j-center bg-white"
				style="width: 680rpx;height: 320rpx;">
				
		<!-- 		<text class="d-flex font-md5 font-weight text-black9">{{residue_coin}}</text> -->
				<text class="d-flex font-md5 font-weight text-black9">{{tipsContent}}</text>
				<view class="d-flex flex-row flex-nowrap j-sb mt-5" style="width: 580rpx;">
					<view class="d-flex a-center j-center rounded60 font-md3 bg-lightbg3"
						style="width: 260rpx;height: 92rpx;" @tap.stop="tipsPopup=false">
						<text class="d-flex text-black9 font-weight">取消</text>
					</view>
					<view class="d-flex bg-gradual-orange-n a-center j-center rounded60 font-md3"
						style="width: 260rpx;height: 92rpx;" @tap.stop="buy_and_pay(originList[originIndex],false,false)">
						<text class="d-flex text-white font-weight">确定</text>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 充值 -->
		<u-popup :show="showRecharge" mode="bottom" bgColor="transparent" closeOnClickOverlay @open="showRecharge=true" @close="showRecharge=false">
			<chongzhi :curInfo="originList[originIndex]" @closeCz="showRecharge=false" :init="showRecharge" @buySuccess="buySuccessFn"></chongzhi>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';

	import tools from "@/utils/tools.js";
	import config from '@/utils/config.js';
	import interfaces from '@/utils/interfaces.js'
	import chongzhi from '@/components/mvideo/chongzhi.vue';
	export default {
		components: {
			chongzhi
		},
		props:{
			/**
			 * 从哪一集开始播放
			 */
			startNumber: {
				type: Number,
				default: 1
			},
			/**
			 * 视频列表
			 */
			videoList: {
				type: Array,
				default: () => [],
			},
			orgvideoList: {
				type: Array,
				default: () => [],
			},
			/**
			 * 是否循环播放一个视频
			 */
			loop: {
				type: Boolean,
				default: false,
			},
			/**
			 * 当视频大小与 video 容器大小不一致时，视频的表现形式。contain：包含，fill：填充，cover：覆盖
			 */
			objectFit: {
				type: String,
				default: 'contain',
			},
			/**
			 * 是否显示原生控制栏
			 */
			controls: {
				type: Boolean,
				default: false,
			},
			/**
			 * 是否显示全屏按钮
			 */
			showFullscreenBtn: {
				type: Boolean,
				default: false,
			},
			/**
			 * 是否自动播放
			 */
			autoplay: {
				type: Boolean,
				default: true,
			},
			/**
			 * 是否自动滚动播放
			 */
			autoChange: {
				type: Boolean,
				default: true,
			},
			/**
			 * 滚动加载阈值（即播放到剩余多少个之后触发加载更多
			 */
			loadMoreOffsetCount: {
				type: Number,
				default: 2,
			},
			ceshicishu:{
				type: Number,
				default: 1,
			},
			/**
			 * 显示类型
			 */
			showtype: {
				type: Number,
				default: 1,
			},
			//购买解锁的剧集id集合
			buy_episodes_list: {
				type: Array,
				default: []
			},
			//点赞列表
			my_like_list: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				isStop2:true,
				diyautoplay:true,
				keepjumpindex:null,
				checktimer:null,
				errortimer:null,
				errortimer2:null,
				timer:null,
				hideTimeSetTime:null,
				playetimer:null,
				user_is_buy:false,//用户是否购买了
				waiting:true,//视频是否出现缓冲loading
				swiper_duration:350,
				video_loaded:[false,false,false],//当前视频是否加载完毕
				tipsPopup:false,
				tipsContent:"",
				residue_coin:"",
				user_isVip:false,
				initStartNumber:1,
				isStop:false,
				is_change:false,
				lastUpdateTime:0,
				showBuy:false,
				NoFastTime: [],//连续多少集没有快进的集合
				isFastForward: false,
				showRecharge: false,
				init_recharge: false,
				//以下是项目自定义
				ishdtip: false,
				showvl: false, //视频列表
				showfk: false, //反馈
				muted: false,
				thevdInfo: null, //当前播放的视频
				myuserInfo: {},
				hidecover_index:-1,
				ml_coin: 0, //金币-账户余额
				vdoc: '', //当前播放视频的ID
				isShowTimeStatus: false,
				isShowRightStatus: true,
				isShowXianLu: false,
				// 当前时长
				currentTime: 0,
				// 总时间
				video_duration:0.1,
				isDrag: false,
				autoscroll: false,
				dragStarTime: '',
				dragEndTime: '',
				my_buy_episodes_list: [],
				duration_map: new Map(),
				currentTime_map: new Map(),
				curStatusRes: '/static/video/video-play.png',
				pause_res: '/static/video/video-pause.png',
				play_res: '/static/video/video-play.png',
				hide_ani: '',
				show_ani: '',
				cur_ani: '',
				not_ani: '',
				menuInfo: [{
					name:"点赞",
					sum: 999,
					icon: 'img-video-dianzan0.png'
				}, {
					name:"追剧",
					sum: 0,
					icon: 'img-video-shoucang0.png'
				}, 
				// {
				// 	name:"分享",
				// 	sum: 999,
				// 	icon: 'img-video-fenxiang.png'
				// }, 
				{
					name:"福利",
					sum: 0,
					icon: 'img-video-renwu.png'
				}],
				
				originList: [], // 源数据
				displaySwiperList: [], // swiper需要的数据
				displayIndex: 0, // 用于显示swiper的真正的下标数值只有：0，1，2。
				originIndex: 0, // 记录源数据的下标
				swiperCurrent: 0,
	
				showControls: "",
				videoContexts: []
			
			};
		},
		computed: {
			...mapState({
				// continuous: state => state.user.continuous,
				userInfo: state => state.user.userInfo,
				statusBarHeight: state => state.layout.statusBarHeight,
				screenWidth: state => state.layout.screenWidth,
				screenHeight: state => state.layout.screenHeight,
				windowWidth: state => state.layout.windowWidth,
				windowHeight: state => state.layout.windowHeight,
				videoPageHeight: state => state.layout.videoPageHeight,
				platform: state => state.layout.platform,
				xBarHeight: state => state.layout.xBarHeight//苹果手机安全区高度
			}),
			check_video_loaded(){
				return {
					video_loaded:this.video_loaded,
					// displayIndex:this.displayIndex,
					user_is_buy:this.user_is_buy,
					isStop:this.isStop
				}
			},
			check_originIndex(){
				return {
					originIndex:this.originIndex
				}
			}
		},
		watch: {
			
			videoList: {
				handler(newVal) {
					if(newVal?.length){
						console.log(this.videoList);
						this.originList = this.videoList;
						console.log(999999,this.initStartNumber,this.startNumber)
						let jumpNumber = this.initStartNumber>this.startNumber?this.initStartNumber:this.startNumber;
						console.log(366,jumpNumber)
						tools.isVip(this, (is_vip) => {
							this.user_isVip = is_vip;
							console.log('是否是VIP：'+is_vip);
							// 大于第一集跳集
							if(jumpNumber>1){
								console.warn('大于第一集跳集');
								this.scrollVideo(jumpNumber,true);
							}else{
								console.warn('===初始化播放===');
								console.log(383,this.ceshicishu)
								if(this.ceshicishu==1){
									this.setCurVdInfo(this.originList[0]);
								}else{
									this.setCurVdInfo(this.originList[this.originIndex]);
								}
								
								this.initVideoContexts();
								this.initSwiperData();
							}
						});
					}
				},
				immediate: true,
				deep: true
			},
			buy_episodes_list: {
				handler(newVal) {
					this.my_buy_episodes_list = newVal;
				},
				immediate: true,
				deep: true
			},
			check_originIndex: {
				handler(newVal) {
					console.warn('=====isShowPayStatus=======');
					this.sliderTime = 0;
					this.waiting = true;
					console.log(this.originList);
					let currentData = this.originList[newVal.originIndex]||{};
					if(this.showtype == 2){
						if (currentData) {
							if (currentData.pay_staus === config.pay_staus.purchased) {
								this.showBuy = false;
								return
							} else {
								// #ifdef MP-WEIXIN || MP-KUAISHOU
								if(this.platform=='ios'&&(this.userInfo.ios_payment!=1)){
									this.swiperCurrent = 0;
									this.initSwiperData(0);
									this.setCurVdInfo(this.originList[0]);
									return;
								};
								// #endif
								if (this.user_isVip) {
									this.showBuy = false;
									return
								}
								if (this.isBuy(currentData.playlet_number)) {
									this.showBuy = false;
									return
								}
								this.showBuy = true;
								//判断用户是否购买
								console.warn('用户是否购买了' + this.isBuy(currentData.playlet_number));
								if (!this.isBuy(currentData.playlet_number)) {
									let playlet_id_buy = uni.getStorageSync('playlet_id_buy') || [];
									console.log(442,currentData.playlet_id);
									console.log(443,playlet_id_buy);
									if (playlet_id_buy.indexOf(currentData.playlet_id) > -1) {
										console.log(446)
										this.clickPay(newVal.originIndex, false);
									} else {
										console.log(449)
										this.clickPay(newVal.originIndex, true);
									}
								}
								return
							}
						}
					}
					this.showBuy = false;
				},
				immediate: true,
				deep: true
			}
		},
		mounted(){
			this.tipsPopup = false;
		},
		
		destroyed(){
			// console.warn('destroyeddestroyeddestroyeddestroyed');
			uni.setNavigationBarTitle({title: ''});
		},
		methods: {
			
			diyerror(e){
				console.log(466,e)
				console.log(467,e.detail.errMsg.indexOf("403"))
				clearTimeout(this.errortimer)
				this.errortimer = setTimeout(()=>{
					try{
						if(e.detail?.errMsg.indexOf("403")>-1){
							console.log(471,this.originList[this.originIndex].playlet_number)
							this.$emit('diyerror',this.originList[this.originIndex].playlet_number);
						}
					}catch(e){}
				},1500)
			},
			// 视频出现缓冲时触发
			waitingFn(e){
				console.warn('=====视频出现缓冲时触发=====');
				console.log(e);
				this.waiting = true;
			},
			// 切换选集
			touchSwitch() {
				if (this.showtype === 1) {
					console.warn('推荐-选集-跳转');
					let {playlet_id,name,last_episode_number,playlet_number} = this.originList[this.originIndex];
					tools.jump_video_page_by_info({playlet_id,name,last_episode_number,playlet_number})
				} else {
					console.warn('剧集弹窗');
					this.$emit('clickEpisode',this.originList[this.originIndex]);
				}
			},
			onended(e) {
				console.warn('======当播放到末尾时触发=======');
				this.nextPlayer();
			},
			//滑到下一个视频
			nextPlayer(){
				console.warn('===自动切换下一个视频==='+this.displayIndex);
				console.log(this.autoChange);
			
				// 自动切换下一个视频
				if (this.autoChange) {
						console.log(526,this.displayIndex)
						this.waiting = true ;
						this.isStop = false;
						this.isStop2 = false;
						const originListLength = this.originList.length;
						console.log(520,this.originIndex)
						this.scrollVideo(this.originIndex + 2 == originListLength + 1 ? 1 : this.originIndex + 2 ,true,true)
				}
			},
			// 播放进度发生变化
			timeUpdate(e) {
				// 判断是否快进
				const currentTime = e.detail.currentTime;
				if(!this.isDrag){
					if(this.sliderTime>0){
						if((currentTime-this.sliderTime)>0.0001&&this.waiting){
							this.waiting = false;
						}
					}else{
						if(currentTime>0.2&&this.waiting){
							this.waiting = false;
						}
					}
				}
				if(currentTime>0.1&&currentTime<=2){
					let index = e.currentTarget.dataset.index;
					this.hidecover_index = index;
				}
				// if (currentTime > this.lastUpdateTime + 1) {
				// 	console.log("用户快进了");
				// 	this.isFastForward = true;
				// }
				this.lastUpdateTime = currentTime;
				
				
				// 拖拽时不需要进行更新
				if (!this.isDrag) {
					// 更新进度
					const {
						currentTime
					} = e.detail
					this.currentTime_map.set(e.currentTarget.id, currentTime)
					this.currentTime = this.currentTime_map.get(`video__${this.displayIndex}`)
					// 播放完成
					if (Math.trunc(currentTime) === Math.trunc(this.video_duration)) {
						console.warn('======播放完成======');
						// this.$emit('playcomplete', e)
					}
				
					this.reloadVideoTime();
					// 返回当前播放时间
					// this.$emit('timeupdate', e);
				}
			},
			// 正在拖拽
			sliderChanging(value) {
				this.cur_ani = "";
				if(this.hideTimeSetTime) clearTimeout(this.hideTimeSetTime);
				this.isShowTimeStatus = true;
				this.isShowRightStatus = false;
				this.sliderTime = value;
				//暂停视频
				this.pauseVideo();
				// 开始拖拽
				this.isDrag = true;
				// 刷新时间
				this.reloadVideoTime()
			},
			// 拖拽结束
			sliderChange(value) {
				console.warn('===拖拽结束===');
				// 隐藏进度条
				this.showAndHideAni(false,200);
				//显示loadding
				this.waiting = true;
				// 停止拖拽
				this.isDrag = false
				// 判断一下是否大于基础时间
				if (this.video_duration > 0.1) {
					let current = this.swiperCurrent,videoContextPrev;
					videoContextPrev = uni.createVideoContext(`video__${this.displayIndex}`, this);
					console.log("sliderChange", value);
					if(this.video_duration == value){
						console.warn('===结束了，下一个视频====');
						this.nextPlayer();
						return
					}
					if(typeof videoContextPrev == 'object'&&videoContextPrev!=null){
						// 跳到指定时间点
						console.warn('===跳到指定时间点====');
						this.sliderTime = value;
						videoContextPrev.seek(value);
						// 并调用播放
						setTimeout(() => {
							this.waiting = false;
							videoContextPrev.play();
						}, 100)
					}
				}
			},
			// 刷新当前时间
			reloadVideoTime() {
				// 当前时间
				this.dragStarTime = tools.ms_time(this.currentTime);
				// console.warn('当前时间：'+this.currentTime);
			},
			// 获取视频总时间
			getVideoDuration() {
				let duration = this.duration_map.get(`video__${this.displayIndex}`);
				// 记录视频总时间
				this.video_duration = Math.round(duration);
				console.log(638,this.video_duration)
				// 总时间
				this.dragEndTime = tools.ms_time(this.video_duration);
			},
			// 加载完成
			loadedmetadata(e) {
				const {
					duration
				} = e.detail
				console.log(637,e)
				let index = e.currentTarget.dataset.index;
				this.duration_map.set(e.currentTarget.id, duration);
				this.$set(this.video_loaded,this.displayIndex,true);
				console.log(697,index , this.displayIndex)
				if(index == this.displayIndex + 1 > 2 ? 0 : this.displayIndex + 1  ){
					//获取视频总时间
					this.getVideoDuration();
				}else if(index == 0 ) {
				  this.getVideoDuration();
				}
			},
			/**
			 * 初始一个显示的swiper数据
			 * @originIndex  从源数据的哪个开始显示默认0，如从其他页面跳转进来，要显示第n个，这个参数就是他的下标
			 */
			initSwiperData(originIndex = this.originIndex) {
			
				// 停止所有视频
				this.isStop = false;
				console.log(672,originIndex,this.displayIndex);
				const originListLength = this.originList.length; // 源数据长度
				const displayList = [];
				console.log(668,this.originList[originIndex].playlet_number_name)
				displayList[this.displayIndex] = this.originList[originIndex];
				displayList[this.displayIndex - 1 == -1 ? 2 : this.displayIndex - 1] =
					this.originList[
						originIndex - 1 == -1 ? originListLength - 1 : originIndex - 1
					];
					
				displayList[this.displayIndex + 1 == 3 ? 0 : this.displayIndex + 1] =
					this.originList[originIndex + 1 == originListLength ? 0 : originIndex + 1];
				this.displaySwiperList = displayList;
			
				if(!this.user_isVip){
					if (this.originList[originIndex].pay_staus != config.pay_staus.purchased&&!this.isBuy(this.originList[originIndex].playlet_number)) {
							this.isStop = true;
					}
				}
				console.log('是否不显示视频：'+this.isStop);
				if(!this.isStop){
						
					console.log(712,this.originList[originIndex])
					console.log(683,this.displayIndex)
					uni.createVideoContext(`video__${this.displayIndex}`, this).seek(0);
					
					this.checkfn()
					// this.isStop = false;
					if(originIndex==this.keepjumpindex){
						console.log(688,"原地跳转")
						this.playVideo(true);
					}
				}
			},
			/**
			 * swiper滑动时候
			 */
			swiperChange(event) {
				clearTimeout(this.errortimer)
				console.log(755,event)
				const {
					current
				} = event.detail;
			
				this.waiting = true;
				this.isStop = false;
				this.isStop2 = true;
				this.scrollVideo(current);
			},
			
			checkfn(){
					let that = this
					clearTimeout(this.checktimer)
					this.checktimer = setTimeout(()=>{
						console.log(739739)
						this.isStop2 = false
						if((this.diyautoplay && this.displaySwiperList[this.displayIndex].pay_staus == 1 ) || this.user_isVip){
							this.playVideo()
						}else{
							for (let i = 0; i < 3; i++) {
									uni.createVideoContext(`video__${i}`, this).stop();
							}
						}
					},350)	
			},
			
			scrollVideo(current,init=false){
				for (let i = 0; i < 3; i++) {
						uni.createVideoContext(`video__${i}`, this).stop();
				}
				this.isStop2 = true;
				if(init){
					this.keepjumpindex = this.originIndex
					this.originIndex = current-1;
					this.timer = setTimeout(()=>{
						this.initSwiperData(this.originIndex);
					},350)
					this.setCurVdInfo(this.originList[this.originIndex]);
				}else{
					console.log(this.displayIndex,current)
					const originListLength = this.originList.length; // 源数据长度
					// 向后滚动
					if (this.displayIndex - current == 2 || this.displayIndex - current == -1) {
						console.log(727)
						this.originIndex =
							this.originIndex + 1 == originListLength ? 0 : this.originIndex + 1;
						this.displayIndex =
							this.displayIndex + 1 == 3 ? 0 : this.displayIndex + 1;
						console.warn('===滑下一个===');
							clearTimeout(this.timer)
							this.timer = setTimeout(()=>{
								this.initSwiperData(this.originIndex);
							},350)
					}
					// 如果两者的差为-2或者1则是向前滑动
					else if (
						this.displayIndex - current == -2 ||
						this.displayIndex - current == 1
					) {
						this.originIndex =
							this.originIndex - 1 == -1 ?
							originListLength - 1 :
							this.originIndex - 1;
						this.displayIndex =
							this.displayIndex - 1 == -1 ? 2 : this.displayIndex - 1;
					
						console.warn('===滑上一个===');
						clearTimeout(this.timer)
						this.timer = setTimeout(()=>{
							this.initSwiperData(this.originIndex);
						},350)
					}
					this.setCurVdInfo(this.originList[this.originIndex]);
				}
			},
			controlstoggle(e) {
				this.showControls = e.detail.show;
				this.$emit("videoControlstoggle", e);
			},
			initVideoContexts(){
				this.videoContexts = [
					uni.createVideoContext("video__0", this),
					uni.createVideoContext("video__1", this),
					uni.createVideoContext("video__2", this),
				];
				console.log(this.videoContexts);
			},
			isBuy(playlet_number) {
				this.user_is_buy = false;
				console.log(this.my_buy_episodes_list);
				for (var i = 0; i < this.my_buy_episodes_list.length; i++) {
					if (playlet_number === this.my_buy_episodes_list[i]) {
						this.user_is_buy = true;
						return true;
					}
				}
				return false;
			},
			updateBuyList(playlet_id) {
				this.$emit('updateBuyList',playlet_id);
			},
			// animationfinish(e){
			// 	let current = e.detail.current;
			// 	let currentData = this.originList[this.originIndex]||{};
			// 	console.log(currentData);
			// 	if(typeof currentData.expiresTime=='number'){
			// 		console.log(787)
			// 		// 离过期时间200秒通知重新刷一下剧集接口
			// 		console.log(currentData.expiresTime);
			// 		if(((currentData.expiresTime)-(new Date().getTime()))<=200000){
			// 			console.warn('离过期时间200秒通知重新刷一下剧集接口');
			// 			this.$emit('expiresVideo', currentData);
			// 		}else{
			// 			console.warn('视频没有过期');
			// 		}
			// 	}
			// },
			buySuccessFn(type) {
				this.showRecharge = false;
				this.showBuy = false;
				if(type==1){
					console.warn('===普通充值4444支付成功，去自动购买解锁===');
					this.clickPay(this.originIndex, false);
				}else if(type==2){
					console.warn('===整剧解锁-去刷新购买剧集===');
					this.initStartNumber = this.originList[this.originIndex].playlet_number;
					this.updateBuyList(this.originList[this.originIndex].playlet_id);
				}else if(type==3){
					console.warn('=====购买了VIP=====');
					this.user_isVip = true;
					this.scrollVideo(this.originIndex+1,true);
				}
			},
			clickPay(index, isShowTips = true) {
				let that = this;
				if(this.platform=='ios'&&(this.userInfo.ios_payment!=1)) return;
				if(this.showtype!=2) return;
				let info = that.originList[index];
				let cur_playlet_buyr = info.amount;
				if(!cur_playlet_buyr) return;
				console.log(948,'clickPay');
				tools.isVip(that, (is_vip) => {
					if (!is_vip) {
						
						if (tools.is_can_consume(cur_playlet_buyr)) {
							console.warn('是否购买了:'+that.isBuy(info.playlet_number));
							if (that.isBuy(info.playlet_number)) {
								this.showBuy = false;
								console.warn("===66666已购买===")
							} else {
								console.warn('确认没有购买');
								let name = uni.getStorageSync(config.coin_name) || "";
								if (isShowTips) {
									console.log(962,this.userInfo.give_coin + this.userInfo.ml_coin )
									this.tipsPopup = true;
									let count = this.userInfo.give_coin + this.userInfo.ml_coin
									this.tipsContent = "是否使用" + cur_playlet_buyr + name + "观看？";
									this.residue_coin = "剩余"+ count + name + ",";
									// uni.showModal({
									// 	title: "是否使用" + cur_playlet_buyr + name + "观看？",
									// 	showCancel: true,
									// 	success: (res) => {
									// 		if (res.confirm) {
									// 			that.buy_and_pay(info,false,false);
									// 		}
									// 	}
									// })
								} else {
									console.warn("===66666去购买===")
									that.buy_and_pay(info,false,false);
								}
							}
						} else {
							console.log('充值页面-弹窗1111');
							that.showRecharge = true;
						}
					} else {
						console.warn('=====VIP=====');
						// uni.showToast({
						// 	title: "vip免费观看！"
						// })
						// that.buy_and_pay(info,true,true)
					}
				})
			},
			buy_and_pay(info, is_vip=false,isAutoBuy = false) {
				let {amount,playlet_id,playlet_number} =  info;
				let that = this;
				console.log('vip：' + is_vip);
				if (!is_vip) {
					tools.consume_playlet(that, playlet_id, playlet_number, (r1) => {
						console.warn('===77777购买结果回调====');
						console.log(r1);
						if (typeof r1 == 'object' && r1 != null) {
							if (r1.code == config.SUCCESS) {
								that.updateBuyList(playlet_id);
								console.log('isAutoBuy：' + isAutoBuy);
								let id_buy = uni.getStorageSync('playlet_id_buy') || [];
								if (id_buy.indexOf(playlet_id) == -1) {
									id_buy.push(playlet_id);
									uni.setStorageSync('playlet_id_buy', id_buy);
								}
								that.initStartNumber = playlet_number;
								that.originList[that.originIndex].pay_staus = 1;
								tools.get_user_info_by_serve(that, () => {})
								console.warn('======解锁成功======');
								setTimeout(() => {
									that.tipsPopup = false;
									that.showBuy = false;
									uni.showToast({
										title: "解锁成功！",
										duration: 1000,
										icon: "none"
									})
								}, 10)
							} else {
								setTimeout(() => {
									this.tipsPopup = false;
									uni.showToast({
										title: "解锁失败！" + (r1.message ? r1.message : ''),
										duration: 1000,
										icon: "none"
									})
								}, 10)
								return;
							}
						}
					})
				} else {
					that.updateBuyList(playlet_id);
					that.$nextTick(() => {
						that.scrollVideo(playlet_number,true);
					})
				}
			},
			pauseVideo(){
				for (let i = 0; i < 3; i++) {
					if(i==this.displayIndex){
						uni.createVideoContext(`video__${i}`, this).pause();
					}else{
						uni.createVideoContext(`video__${i}`, this).stop();
					}
				}
			},
			playVideo(){
				console.log(949,  new Date().getTime() + 5 * 1000 >= this.originList[this.originIndex]?.wx_original_time*1000)
				//判断视频过期时间重新请求视频列表
				if((new Date().getTime() + 5 * 1000 >= this.originList[this.originIndex]?.wx_original_time*1000)){
					clearTimeout(this.errortimer2)
					this.errortimer2 = setTimeout(()=>{
						this.$emit('expireRefresh',this.originList[this.originIndex].playlet_number);
						return
					},1500)
					
				}
				uni.createVideoContext(`video__${this.displayIndex}`, this).play();
			},
			clickPlay(e) {
				console.warn('===点击按钮播放/暂停===');
				let that = this;
				let index = e.currentTarget.dataset.index;
				let current = this.swiperCurrent;
				if (this.showBuy) {
					return
				}
				console.log(this.displayIndex);
				let isPlayStatus = this.curStatusRes === this.play_res;
				if(!isPlayStatus){
					setTimeout(()=>{
						console.warn('11111111111111');
						that.isShowTimeStatus = false;
						that.isShowRightStatus = true;
					},350)
				}
				console.warn('isPlayStatus：'+isPlayStatus);
				
				if (isPlayStatus) {
					console.warn('===暂停视频===');
					this.pauseVideo();
				} else {
					setTimeout(function() {
						//将点击视频进行播放
						console.log(977,'===播放视频===');
						that.playVideo();
					}, 350);
				}
				this.cur_ani = isPlayStatus ? this.show_ani : this.hide_ani
				this.curStatusRes = isPlayStatus ? this.pause_res : this.play_res
			},
			
			// 点击播放或暂停
			clickVideo(e) {
				console.log('点击播放或暂停');
				let that = this;
				let current = this.swiperCurrent;
				if (this.showBuy) {
					return
				}
				this.isShowRightStatus = !this.isShowRightStatus;
				this.isShowTimeStatus = !this.isShowTimeStatus;
				this.isShowXianLu = false
				if (this.not_ani === '') {
					let ani = uni.createAnimation({
						timingFunction: "ease",
					});
					ani.opacity(0.5).step({
						duration: 0,
						delay: 0
					});
					this.not_ani = ani;
				}
				that.showAndHideAni()
				if (this.show_ani == '') {
					let ani = uni.createAnimation({
						timingFunction: "linear",
					});
					ani.opacity(1).step({
						duration: 1500,
						delay: 0
					}); //描述动画
					this.show_ani = ani.export();
				}
				if (this.hide_ani == '') {
					let ani = uni.createAnimation({
						timingFunction: "ease",
					});
					ani.opacity(0.3).step({
						duration: 1500,
						delay: 0
					});
					this.hide_ani = ani.export();
				}
			},
			showAndHideAni(cur_ishide = true,hideTime = 2800) {
				let that = this;
				if(this.hideTimeSetTime) clearTimeout(this.hideTimeSetTime);
				console.warn('cur_ishide：'+cur_ishide);
				if (cur_ishide) {
					that.cur_ani = this.not_ani;
				}
				if (this.isShowTimeStatus) {
					setTimeout(() => {
						that.cur_ani = that.show_ani;
					}, 50)
					this.hideTimeSetTime = setTimeout(() => {
						that.isShowTimeStatus = false;
						that.isShowRightStatus = true;
						that.cur_ani = that.hide_ani;
					},hideTime)
				}
			},
			playhandler(e){
				console.warn('==========播放========',this.waiting);
				console.log(1043,this.originIndex)
				let that = this;
				this.waiting = false;
				this.isStop2 = false;//防止充值完后没有设置
				let index = e.currentTarget.dataset.index;
				that.showAndHideAni(false)
				that.curStatusRes = that.play_res
				that.autoscroll = false
				that.originList[that.originIndex]['playTime'] = Date.now();
				console.log(988,that.originList[that.originIndex])
				// tools.update_history(that.originList[that.originIndex]);
				that.$nextTick(() => {
					that.is_change = true;
				})
				if (that.isLike()) {
					that.menuInfo[0].icon = "img-video-dianzan1.png";
				} else {
					that.menuInfo[0].icon = "img-video-dianzan0.png";
				}
				
				if (that.isZhuiJu()) {
					that.menuInfo[1].icon = "img-video-shoucang1.png";
				} else {
					that.menuInfo[1].icon = "img-video-shoucang0.png";
				}
				
				if(this.showtype==2){
						let obj = this.orgvideoList[this.originIndex]
						let _history = uni.getStorageSync(config.history) || []
						console.log(1184,obj)
						console.log(806,_history.some(i=>(i.playlet_id == obj.playlet_id && i.playlet_number == obj.playlet_number)))
						if(!_history.some(i=>(i.playlet_id == obj.playlet_id && i.playlet_number == obj.playlet_number))){
								console.log("有记录吗")
								console.log(1181,obj.pay_staus,!this.isStop2,this.user_isVip)
								if((obj.pay_staus == 0 && !this.isStop2) || this.user_isVip){
									console.log(1134)
									console.log(1133,"播放三秒后",obj.playlet_id,obj.playlet_number)
									that.request({
										url: interfaces.view_records,
										data: {
											"playlet_id": obj.playlet_id,
											"playlet_number": obj.playlet_number
										},
										method: config.post,
										success: (res) => {
											console.log(1201)
										},
										fail:(err)=>{
											console.log(1207)
										}
									});
								}							
						}
				}
				tools.update_history(that.originList[that.originIndex]);
				
			
			},
			//判断当前播放视频是否点赞
			isLike() {
				let is_like = false;
				let playlet_id = this.originList[this.originIndex].playlet_id;
				let playlet_number = this.originList[this.originIndex].playlet_number;
				is_like = tools.get_like(playlet_id, playlet_number);
				if (is_like != null) {
					return is_like
				} else {
					is_like = false;
				}
			
				if (this.showtype === config.video_status.recommend) {
					if (this.originList[this.originIndex].is_likes === 1) {
						return true;
					}
				} else {
					for (var i = 0; i < this.my_like_list.length; i++) {
						if (playlet_number === this.my_like_list[i]) {
							return true;
						}
					}
				}
				return is_like;
			},
			//判断当前播放视频是否收藏追剧
			isZhuiJu() {
				let cur_index = this.curIndex;
				let is_zhuiju = false;
				let playlet_id = this.originList[this.originIndex].playlet_id
				let playlet_number = this.originList[this.originIndex].playlet_number
				is_zhuiju = tools.get_zhuiju(playlet_id)
				if (is_zhuiju != null) {
					return is_zhuiju
				} else {
					is_zhuiju = false;
				}
				return this.is_shou_cang;
			},
			
			getCurNum(tab, index) {
				if (tab.name == '点赞') {
					return this.originList[index].likes_number
				} else if (tab.name == '分享') {
					return this.originList[index].share_number
				} else {
					return tab.name
				}
			},
			//点击反馈
			onBtnFk() {
				console.warn('===点击反馈===');
				this.$emit('clickFeedback',this.originList[this.originIndex]);
			},
			likeVideo(playlet_id, playlet_number){
				let islike = false;
				if (this.menuInfo[0].icon == "img-video-dianzan0.png") {
					this.menuInfo[0].sum++;
					this.menuInfo[0].icon = "img-video-dianzan1.png";
					islike = true;
				} else {
					this.menuInfo[0].sum--;
					this.menuInfo[0].icon = "img-video-dianzan0.png";
					islike = false;
				}
				tools.update_like(playlet_id, playlet_number, islike);
				console.log('update_likeupdate_like');
			},
			//当前剧名字
			setCurVdInfo(info) {
				console.warn('===设置当前剧信息===');
				console.log(info);
				this.$emit('curInfo',info);
				this.originIndex = (info.id-1);
				this.menuInfo[0].sum = info.likes_number
				this.menuInfo[2].sum = info.share_number
				uni.setNavigationBarTitle({
					title: info.playlet_number_name
				})
			},
			clickRightIcon(item) {
				let that = this;
				switch (item.name) {
					case '点赞': {
						let playlet_id = that.originList[that.originIndex].playlet_id,
						playlet_number = that.originList[that.originIndex].playlet_number,
						stype = (this.menuInfo[0].icon == "img-video-dianzan0.png")?1:0;
						console.log(playlet_id,playlet_number,stype);
						console.log(tools);
						tools.like_video(that, playlet_id,playlet_number,stype, (res) => {
							console.log("like_video", res)
							if(typeof res == 'boolean'){
								if(res){
									this.likeVideo(playlet_id, playlet_number);
									return
								}
								this.$refs.uToast.show({
									title: '抱歉，点赞失败',
									type: 'error',
									icon:false,
									duration:2000
								})
							}
						})
					}
					break;
					case '追剧': {
						let iszhuiju = false;
						if (this.menuInfo[1].icon == "img-video-shoucang0.png") {
							// this.menuInfo[1].sum++;
							this.menuInfo[1].icon = "img-video-shoucang1.png";
							iszhuiju = true;
						} else {
							// this.menuInfo[1].sum--;
							this.menuInfo[1].icon = "img-video-shoucang0.png";
							iszhuiju = false;
						}
						let playlet_id = that.originList[that.originIndex].playlet_id
						tools.update_zhuiju(playlet_id, iszhuiju, this.originList[this.originIndex]);
					}
					break;
					case '分享': {}
					break;
					case '福利': {
						tools.navigateToWelfare()
					}
					break;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.m-wx-video-swiper,.m-wx-video-player{
		background-color: #000000;
		z-index: 2!important;
	}
	.m-wx-video-swiper {
		.swiper-item{
			position: relative;
		}
		.m-wx-video-poster {
			background-color: #000000;
			width: 100%;
			height: 100%;
		}
	}
	
	.playState {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 50px;
		right: 0;
		width: 120rpx;
		height: 120rpx;
		margin: auto;
		z-index: 5;
	}
	
	/*右侧工具*/
	.video-tools {
		position: fixed;
		right: 20rpx;
		overflow: initial;
		width: 100rpx;
		z-index: 999;
	}
	.dragTime{
		
	}
	.video_bottom {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 2;
		.video-time {
			width: 100%;
	
			.slider-view {
				width: 70%;
				flex-shrink: 0;
			}
	
			.video-time-current {
				color: #fff;
			}
		}
	
		.video-info-current {
			align-self: center;
			color: #fff;
			font-size: 34rpx;
			margin: 0px 40rpx 0px 40rpx;
			.video-info-btn {
				padding-left: 30rpx;
				.arrow-right-title {
					font-size: 32rpx;
					margin-right: 0rpx;
				}
			}
	
		}
	
	}
	
	.video-tools .control-wrap {
		line-height: 60rpx;
		overflow: initial;
		width: 100rpx;
	}
	
	.video-tools .item {
		position: relative;
		text-align: center;
		margin-top: 30rpx;
		background: none;
		width: 100rpx;
		padding: 0;
	}
	
	.video-tools .item::after {
		display: none;
	}
	
	.video-tools .icon {
		display: inline-block;
		position: relative;
		width: 70rpx;
		height: 70rpx;
		margin-bottom: 12rpx;
		font-size: 0;
		overflow: hidden;
		vertical-align: middle;
		z-index: 9999;
	}
	
	.video-tools .item .txt {
		display: block;
		line-height: 1;
		font-size: 26rpx;
		font-weight: 400;
		height: 30rpx;
		text-shadow: 0 0 8rpx rgba(0, 0, 0, .3);
		color: rgba(255, 255, 255, 1);
	}
	
	.video-tools .avatar {
		display: inline-block;
		position: relative;
		width: 100rpx;
		height: 100rpx;
		margin-bottom: 12rpx;
		font-size: 0;
		overflow: hidden;
		vertical-align: middle;
		z-index: 88;
		border-radius: 50%;
		box-sizing: border-box;
		border: 4rpx solid #fff;
	}
	
	.video-tools .add {
		position: absolute;
		width: 30rpx;
		height: 30rpx;
		left: 37rpx;
		bottom: 5rpx;
		z-index: 99;
	}
	
	
	/*弹出商品*/
	.video-goods {
		width: 360rpx;
		height: 160rpx;
		border-radius: 8rpx;
		background: #fff;
		position: fixed;
		animation: slideContentUp 0.4s linear both;
		bottom: 40rpx;
		left: 20rpx;
		padding: 0;
		z-index: 998;
		box-sizing: border-box;
	}
	
	/* 动态设置高度 */
	@keyframes slideContentUp {
		from {
			height: 0;
		}
	
		to {
			height: 160rpx;
		}
	}
	
	.video-goods cover-image {
		width: 450rpx;
		height: 250rpx;
		border-radius: 8rpx;
		overflow: hidden;
	}
	
	.video-goods .icon-hide {
		position: absolute;
		right: 10rpx;
		top: 10rpx;
		color: rgba(0, 0, 0, .6);
		z-index: 999;
		width: 40rpx;
		height: 40rpx;
	}
	
	/*商户名称*/
	.video-info {
		position: absolute;
		bottom: 50rpx;
		color: #fff;
		font-size: 30rpx;
		left: 30rpx;
	}
	
	.shopname {
		font-size: 34rpx;
		font-weight: 500;
	}
	
	.video-info .videotitle {
		font-size: 28rpx;
		width: 500rpx;
		word-break: break-all;
		white-space: normal;
		margin-top: 5rpx;
	}
	
	
	/*迷你商品*/
	.video-item {
		position: relative;
		color: #fff;
		font-size: 35rpx;
		background: rgba(0, 0, 0, 0.6);
		padding: 10rpx 10rpx;
		margin-bottom: 10rpx;
		border-radius: 8rpx;
		z-index: 88;
		overflow: hidden;
		width: auto;
		display: inline-block;
	}
	
	.video-item .item-cart {
		float: left;
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}
	
	.video-item .item-title {
		float: left;
		font-size: 28rpx;
		line-height: 40rpx;
		height: 40rpx;
		overflow: hidden;
		white-space: nowrap;
		word-wrap: break-word;
		max-width: 420rpx;
		overflow: hidden;
	}
	
	/* 以下为光盘的样式 */
	.video-disk {
		// position: fixed;
		// bottom: 10rpx;
		// right: 10rpx;
		width: 60rpx;
		height: 60rpx;
	}
	
	.video-disk .music-cover {
		position: relative;
		width: 60rpx;
		height: 60rpx;
		border-radius: 100%;
		box-shadow: 0 2rpx 4rpx 0 rgba(0, 0, 0, .2);
		/* animation: rotate 5s linear infinite; */
		z-index: 2;
		box-sizing: border-box;
	}
	
	.video-disk .music-cover .music-disk {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
	}
	
	.video-disk .music-cover .music-logo {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		position: absolute;
		opacity: 0.8;
		left: 10rpx;
		top: 10rpx;
	}
	
	.video-disk .note-wrap {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 0;
	}
	
	.video-disk .note {
		position: absolute;
		width: 40rpx;
		height: 30rpx;
		left: -25rpx;
		bottom: 6rpx;
		opacity: 0;
		z-index: 999;
		-webkit-animation: note 1.8s linear .6s infinite;
		animation: note 1.8s linear .6s infinite;
	}
	
	@keyframes rotate {
		from {
			transform: rotate(0deg)
		}
	
		to {
			transform: rotate(359deg)
		}
	}
	
	.video-disk .note:nth-child(2) {
		-webkit-animation: note 1.8s linear 1.2s infinite;
		animation: note 1.8s linear 1.2s infinite
	}
	
	.video-disk .note:nth-child(3) {
		-webkit-animation: note 1.8s linear 1.8s infinite;
		animation: note 1.8s linear 1.8s infinite
	}
	
	@keyframes note {
		0% {
			trnaform: translate(0, 0) rotate(0) scale(1);
			opacity: 1
		}
	
		50% {
			transform: translate(-24rpx, -30rpx) rotate(15deg) scale(.8);
			opacity: .8
		}
	
		100% {
			transform: translate(-16rpx, -60rpx) rotate(30deg) scale(.6);
			opacity: 0
		}
	}
	
	.cu-form-group .title {
		min-width: calc(4em + 30rpx);
	}
	
	.xianlu-class {
		width: 90rpx;
		height: 36rpx;
		font-size: 24rpx;
		justify-content: center;
		align-items: center;
		display: flex;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		opacity: 1;
		border: 1rpx solid #E68B3E;
	}
	.video-cover {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;  /* 确保覆盖整个视频 */
	  height: 100%; /* 确保覆盖整个视频 */
	  background-color: rgba(0, 0, 0, 0); /* 完全透明或者半透明*/
	}
</style>